<template>
  <div style="">
    <Header :left="true" leftText="返回" title="标签验证"> </Header>
    <NoticeBar color="#1989fa" background="#ecf9ff" style="margin-top: 5px; font-size: 15px; font-weight: bold"
      left-icon="description">标签验证信息</NoticeBar>
    <van-form :style="autoHeight" @submit="onSubmit">
      <van-field required readonly class="formstyle" name="picker" :value="valueCustomerName" label="客户名称"
        placeholder="点击选择客户名称" @click="showPickerCustomer = true" />
      <van-popup v-model="showPickerCustomer" position="bottom">
        <van-picker show-toolbar :columns="columnsCustomer" @confirm="onConfirmCustomer"
          @cancel="showPickerCustomer = false">
          <template #option="option">
            <div style="display: flex; flex-direction: column; align-items: center">
              <div>{{ option.customer }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>

      <van-field required readonly class="formstyle" name="picker" :value="valueProductionName" label="产品名称"
        placeholder="点击产品名称" @click="showPickerProductionon = true" />
      <van-popup v-model="showPickerProductionon" position="bottom">
        <van-picker show-toolbar :columns="columnsProduction" @confirm="ConfirmProductionon"
          @cancel="showPickerProductionon = false">
          <template #option="option">
            <div style="display: flex; flex-direction: column; align-items: center">
              <div>{{ option.production }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>

      <van-field required v-model="form.frontlabel" label="前标标签号" class="formstyle" readonly right-icon="scan"
        placeholder="点击扫描前标标签号" @click="showFrontLabelScanner()">
        <Icon slot="right-icon" center name="enlarge" size="2em"></Icon>
      </van-field>

      <van-field required v-model="form.backlabel" label="背标标签号" class="formstyle" readonly right-icon="scan"
        placeholder="点击扫描背标标签号" @click="showBackLabelScanner()">
        <Icon slot="right-icon" center name="enlarge" size="2em"></Icon>
      </van-field>

      <div style="margin: 16px">
        <van-button color="#138087" round block type="info" native-type="submit" @click="getList()">验证标签</van-button>
      </div>
    </van-form>
    <van-dialog v-model="showDialog" :title="title" theme="round-button" confirm-button-text="确认" @confirm="itemclear()"
      :confirm-button-color="color">
    </van-dialog>
  </div>
</template>

<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient } from "@/libs/api";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);
Vue.use(Dialog);

export default {
  name: "gotowork",
  components: {
    Form,
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },
  data() {
    return {
      user: [],
      form: {
        customer: "",
        production: "",
        frontlabel: "",
        backlabel: "",
      },
      valueCustomerName: "",
      columnsCustomer: [],
      showPickerCustomer: false,
      valueProductionName: "",
      columnsProduction: [],
      showPickerProductionon: false,
      showPickerdatetime: false,
      showDialog: false,
      title: "",
      color: "",
      showItem: false,
    };
  },

  created: function () {
    this.user = JSON.parse(storage.get("user"));
    //this.getList();
    api.requestPermission(
      {
        list: ["camera", "microphone", "storage"],
      },
      function (ret, err) { }
    );
    
    try {
      var manageStorage = api.require("manageStorage");
      manageStorage.getDeviceVersion({}, function (rett) {
        if (Number(rett.version) >= 30) {
          manageStorage.hasAllFilePermission({}, function (ret) {
            if (ret.status == true) {
              return;
            } else {
              manageStorage.requestAllFilePermission({}, function (ret) {});
            }
          });
        } else {
          return;
        }
      });
    } catch {}
    
    this.getCustomerAndProductionList();
  },
  methods: {
    //查询所有标签数据
    async getList() {
      if (this.form.customer == "") {
        Toast.fail("请选择客户名称");
        return;
      }
      if (this.form.production == "") {
        Toast.fail("请选择产品名称");
        return;
      }
      if (this.form.frontlabel == "") {
        Toast.fail("请扫描前标标签号");
        return;
      }
      if (this.form.backlabel == "") {
        Toast.fail("请扫描后标标签号");
        return;
      }
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/label/LabelVerification/list",
          {
            body: {
              customer: _this.form.customer,
              production: _this.form.production,
              frontlabel: _this.form.frontlabel,
              backlabel: _this.form.backlabel,
            },
          }
        );
        if (res.code === 200 && res.total > 0) {
          Toast.clear();
          this.showDialog = true;
          this.title = "上料正确";
          this.color = "#008000";
          this.showItem = true;
        } else if (res.code === 200 && res.total == 0) {
          Toast.clear();
          this.showDialog = true;
          this.title = "上料错误，请重新扫描";
          this.color = "#FF0000";
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        Toast.clear();
        Toast.fail(JSON.stringify(e));
      }
    },
    //查询客户和产品数据
    async getCustomerAndProductionList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
          "/app/label/LabelVerification/getCustomerAndProduction"
        );
        if (res.code === 200) {
          Toast.clear();
          _this.columnsCustomer = res.customerList.map((item) => ({
            customer: item,
          }));
          _this.columnsProduction = res.productionList.map((item) => ({
            production: item,
          }));
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        alert(JSON.stringify(e));
        Toast.fail(JSON.stringify(e));
      }
    },
    showFrontLabelScanner() {
      let _this = this;
      if (
        api.deviceName.toLowerCase() == "huawei" ||
        api.deviceName.toLowerCase() == "honor"
      ) {

        // _this.form.frontlabel = ret.content;
        var zyHmsScan = api.require('zyHmsScan');
        var param = {
          //returnAll:true
        };
        zyHmsScan.openDefaultView(param, function (ret) {
          // _this.addBarCode(ret.result);
          _this.form.frontlabel = ret.result;
          //api.alert({ msg: JSON.stringify(ret) });
        });
        // var QRScan = api.require("QRScan");
        // QRScan.customizedScanner(
        //   {
        //     rect: {
        //       x: 15, //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
        //       y: 0, //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
        //       w: 320, //（可选项）数字类型；模块的宽度；支持设置'auto'；默认：所属的 Window 或 Frame 的宽度
        //       h: 480, //（可选项）数字类型；模块的高度；支持设置'auto'；默认：所属的 Window 或 Frame 的高度
        //     },
        //     rectOfInterest: {
        //       x: 64, //（可选项）数字类型；扫码识别区域左上角的 x 坐标（相对于扫码区rect）；默认：0
        //       y: 65, //（可选项）数字类型；扫码识别区域左上角的 y 坐标（相对于扫码区rect）；默认：0
        //       w: 250, //（可选项）数字类型；扫码识别区域的宽度；默认：扫码区rect的宽度
        //       h: 250, //（可选项）数字类型；扫码识别区域的高度；默认：扫码区rect的高度
        //     },
        //     //tipString:'放入框内扫码',
        //     maskColor: "rgba(0,0,0,0.5)",
        //     scanLine: {
        //       color: "#00FF00",
        //       thickness: 2,
        //     },
        //     marginB: 30,
        //     formatType: "ALL",
        //   },
        //   function (ret) {
        //     if (ret) {
        //       _this.form.frontlabel = ret.content;
        //     }
        //   }
        // );
        //QRScan.closeCustomizedScanner();
      } else {
        var FNScanner = this.$ac.require("FNScanner");
        FNScanner.openScanner(
          {
            autorotation: true,
          },
          function (ret, err) {
            if (ret) {
              if (ret.eventType == "success" && ret.content != "") {
                _this.form.frontlabel = ret.content;
              }
            } else {
              alert(JSON.stringify(err));
            }
          }
        );
      }
    },
    showBackLabelScanner() {
      let _this = this;
      if (
        api.deviceName.toLowerCase() == "huawei" ||
        api.deviceName.toLowerCase() == "honor"
      ) {
        //_this.form.backlabel = ret.content;

        var zyHmsScan = api.require('zyHmsScan');
        var param = {
          //returnAll:true
        };
        zyHmsScan.openDefaultView(param, function (ret) {
          //_this.addBarCode(ret.result);
          _this.form.backlabel = ret.result;
          //api.alert({ msg: JSON.stringify(ret) });
        });

        // var QRScan = api.require("QRScan");
        // QRScan.customizedScanner(
        //   {
        //     rect: {
        //       x: 15, //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
        //       y: 0, //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
        //       w: 320, //（可选项）数字类型；模块的宽度；支持设置'auto'；默认：所属的 Window 或 Frame 的宽度
        //       h: 480, //（可选项）数字类型；模块的高度；支持设置'auto'；默认：所属的 Window 或 Frame 的高度
        //     },
        //     rectOfInterest: {
        //       x: 64, //（可选项）数字类型；扫码识别区域左上角的 x 坐标（相对于扫码区rect）；默认：0
        //       y: 65, //（可选项）数字类型；扫码识别区域左上角的 y 坐标（相对于扫码区rect）；默认：0
        //       w: 250, //（可选项）数字类型；扫码识别区域的宽度；默认：扫码区rect的宽度
        //       h: 250, //（可选项）数字类型；扫码识别区域的高度；默认：扫码区rect的高度
        //     },
        //     //tipString:'放入框内扫码',
        //     maskColor: "rgba(0,0,0,0.5)",
        //     scanLine: {
        //       color: "#00FF00",
        //       thickness: 2,
        //     },
        //     marginB: 30,
        //     formatType: "ALL",
        //   },
        //   function (ret) {
        //     if (ret) {
        //       _this.form.backlabel = ret.content;
        //     }
        //   }
        // );
        //QRScan.closeCustomizedScanner();
      } else {
        var FNScanner = this.$ac.require("FNScanner");
        FNScanner.openScanner(
          {
            autorotation: true,
          },
          function (ret, err) {
            if (ret) {
              if (ret.eventType == "success" && ret.content != "") {
                _this.form.backlabel = ret.content;
              }
            } else {
              alert(JSON.stringify(err));
            }
          }
        );
      }
    },
    itemclear() {
      this.form.frontlabel = "";
      this.form.backlabel = "";
    },
    ConfirmProductionon(value, index) {
      this.form.production = this.columnsProduction[index].production;
      this.valueProductionName = this.columnsProduction[index].production;
      this.showPickerProductionon = false;
    },
    onConfirmCustomer(value, index) {
      this.valueCustomerName = this.columnsCustomer[index].customer;
      this.form.customer = this.columnsCustomer[index].customer;
      this.showPickerCustomer = false;
    },
  },
};
</script>

<style>
body {
  background-color: white;
}

.table-title-class {
  background-color: #304156;
  color: #fff;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.buttongroup {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.container.dwo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttonLeft {
  position: fixed;
  bottom: 8px;
  float: left;
  width: 49%;
}

.formstyle {
  margin-top: 8px;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.radioteam {
  display: flex;
  align-items: center;
  padding-left: 13px;
  margin-top: 10px;
  margin-left: 34px;
  margin-bottom: 10px;
}

.buttonRight {
  position: fixed;
  bottom: 8px;
  float: right;
  left: 51%;
  width: 49%;
  background-color: #f22028;
  border-color: #f22028;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 50%;
  bottom: 3rem;
  overflow: scroll;
  right: 10px;
  width: 100%;
  z-index: 1;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.mg5 {
  margin-right: 5px;
}

.tag_margin {
  margin: 2px 5px;
}

.card_under {
  height: 100%;
  width: 100%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}

.card_icon {
  text-align: center;
  /* position: absolute; */
  height: 8rem;
  width: 80%;
  margin: 12% 10%;
  background: rgba(35, 180, 237, 1);
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.text {
  font-size: 18px;
  color: #4e4a67;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 600;
}

.text_small {
  font-size: 16px;
  color: red;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 700;
}

.text_scan {
  font-size: 16px;
  color: #4e4a67;
  margin: auto auto auto 20px;
  line-height: 1.5em;
  text-align: justify;
}

.divStyle {
  margin-left: 3px;
  margin-right: 3px;
}
</style>
